<template>
	<view class="readme-box" :class="{ fixed: fixed }">
		<checkbox-group @change="change" style="padding-bottom: 20rpx;">
			<template v-for="(item, index) in readme">
				<view class="item-box" :key="index">
					<label>
						<checkbox checked="true" :value="item" color="rgb(13,109,214)" />
					</label>
					<view>我已阅读并同意<span class="protocol-name">《{{ item }}》</span></view>
				</view>
			</template>
		</checkbox-group>
		<view class="btn-box" :class="{ fixed: fixed }">
			<button :disabled="disabled" :type="btnType ? btnType : 'primary'" @click="submit">{{ text }}</button>
		</view>
	</view>
</template>

<script>
export default {
	name: "readme",
	props: {
		text: {
			default: '提交'
		},
		readme: {
			type: Array
		},
		btnType: {},
		fixed: {
			default: false
		}
	},
	data() {
		return {
			checked: []
		};
	},
	computed: {
		disabled: function () {
			return this.readme.length !== this.checked.length
		}
	},
	mounted() {
		this.checked = this.readme.map(item => {
			return true
		})
	},
	methods: {
		change(e) {
			this.checked = e.detail.value
		},
		submit() {
			if (this.text === '下一步') {
				this.$emit('submit')
				return
			}
			this.$emit('submit')
		}
	}
}
</script>

<style lang="scss" scoped>
.readme-box {
	width: 100%;
	padding: 30rpx;

	&.fixed {
		margin-top: auto;
		padding-bottom: 120rpx;
	}
}

.uni-label-pointer {
	margin-top: -3rpx;
	display: inline-flex;
	align-items: flex-start;
	overflow: hidden;
}

.btn-box {

	&.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
	}
}

.item-box {
	font-size: 24rpx;
	margin-bottom: 16rpx;
	display: flex;
	.protocol-name {
		color: #008FF8;
	}
}
</style>